<!-- 首页 -->
<template>
	<view>
		<u-navbar title="我的钱包"></u-navbar>
		<view id="videoContain"></view>
	</view>
</template>

<script>
export default {
	components: {
		
	},
	props:{
		
	},
	data() {
		return {
			list: [
				'请在我的主页完成实名认证',
				'实名认证成功可以显示在脱单墙',
			]
		};
	},
	created() {
		this.tcpalyer();
	},
	methods: {
		tcpalyer() {
			// sdk引入有顺序
			debugger
			let script1 = document.createElement("script");
			script1.type = "text/javascript";
			script1.src = "https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/libs/hls.min.0.13.2m.js";
			document.getElementsByTagName("head")[0].appendChild(script1);
			// 创建script标签，引入外部文件
			let script = document.createElement("script");
			script.type = "text/javascript";
			script.src = "https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/tcplayer.v4.2.1.min.js";
			document.getElementsByTagName("head")[0].appendChild(script);
			
			const video = document.createElement("video")    
			video.setAttribute("id", "player-container-id")
			video.setAttribute('playsinline',true)
			video.setAttribute('webkit-playsinline',true)
			video.setAttribute('autoplay',true)
			document.getElementById("videoContain").appendChild(video)
			
			// 引入成功
			script.onload = function () {
				console.log("js资源加载成功了");
				var player = TCPlayer("player-container-id", {
				fileID: '5285890799710670616',
				appID: '1400329073',
					// autoplay: true, 
					width: "375",
					height: "320",
				});
			};
			// 引入失败
			script.onerror = function () {
				console.log("js资源加载失败了");
			};
		},
		
	}
}; 
</script>

<style>
	page {
		background-color: #f9f8f8;
	}
</style>

<style lang="scss" scoped>
	.page-box {
		padding: 10px;
	}
	.card-box {
		background-color: #fff;
		padding: 10px;
		padding-top: 0;
		border-radius: 5px;
		margin-bottom: 10px;
	}
	.card-title {
		font-size: 32rpx;
		padding: 10px 0;
	}
	.card-item {
		display: flex;
		align-items: center;
		padding: 10px 0;
	}
	.dou-img-bg {
		background-color: #f6c20c30;
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 5px;
	}
	.coin-img-bg {
		background-color: #fece0a4a;
		width: 100rpx; 
		height: 100rpx;
		border-radius: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 5px;
	}
	.coin-img {
		width: 80rpx;
		height: 80rpx;
	}
	.item-right {
		display: flex;
		justify-content: space-between;
		flex: 1;
		align-items: center;
	}
	.num-body {
		display: flex;
		align-items: center;
	}
	.num-value {
		font-size: 50rpx;
		font-weight: bolder;
		margin-right: 5px;
	}
	.num-label {
		font-size: 28rpx;
	}
	.num-tip {
		font-size: 28rpx;
		color: #a7a2a2;
	}
	.coin-btn {
		font-size: 28rpx;
		padding: 0 20px;
		border-radius: 5px;
		background-color: #6e60e7;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 30px;
	}
</style>
